/* style.css------music.html */
		html{height: 100%;width: 100%;}
		body{margin: 0;padding: 0;overflow: hidden;height: 100%;width:100%;position: fixed;top: 0;left: 0;}
		body::before{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(image/6.jpg)no-repeat center;
			background-size:100% 100%;
			opacity: 0.8;
			-webkit-filter: blur(4px);
            -moz-filter: blur(4px);
            -o-filter: blur(4px);
            -ms-filter: blur(4px);
            filter: blur(4px);
		}

		.navbar{
			position: fixed;
			top: 0;left: 0;
			z-index: 999;
			opacity: .8;
		}
		.navbar .navbar-header a:hover{
			opacity: 1;
			text-shadow: 0 0 4px #1E1E1E;
		}
		.navbar div ul{
			width: 80%;
		}
		.navbar div ul li{
			padding: 0 10px;
		}
		.navbar div ul li:hover{
			opacity: 1;
			text-shadow: 0 0 4px #1E1E1E;
		}
		.icontainer{position: relative; height: 100%;margin: 0 auto;padding: 15px;text-align: center;}
		
		.icontainer.container{
			width: 96%;
		}
		.icontainer .obtain.container{
			position: fixed;
			top: 70px;
			left: 0;
			width: 80%;
		}
		.icontainer .obtain a{
			display:inline-block;line-height: 2.3em;
			height: 40px;border-radius: 11px;text-align: center;
			background-color: #FDF867;position: relative;
			margin: 0 20px;opacity: .8;
			color: #00A2E8;text-decoration: none;overflow: hidden;font-size: 18px;
		}
		.icontainer a:hover,.icontainer a{
			color: transparent;text-decoration: none;
		}
		.icontainer input{width: 100%;height: 100%;opacity: 0;position: absolute;}

		.icontainer a button{opacity: 0;position: absolute;}

		.icontainer a.clo{
			color: #00A2E8;
		}

		.icontainer .obtain.container a.clo:hover{opacity: 1;}

		.icontainer .option{
			position: fixed;left: 80px;bottom: 120px;
			width: 160px;height: 160px;
		}

		.icontainer .option div{
			width: 100%;height: 100%;border-radius: 50%;
			background: url(image/5.jpg)no-repeat center;background-size: 160px;
			border: 2px solid transparent;
			animation:mymove 5s linear infinite;
			-webkit-animation:mymove 5s linear infinite;
			-moz-animation:mymove 5s linear infinite;
			-o-animation:mymove 5s linear infinite;

			transition:all 0.5s;
			-webkit-transition:all 0.5s;
			-moz-transition:all 0.5s;
			-o-transition:all 0.5s;

			animation-play-state: paused;
		}

		@keyframes mymove
		{
			0% {transform:rotate(0deg);}
			50% {transform:rotate(180deg);}
			100% {transform:rotate(360deg);}
		}

		@-webkit-keyframes mymove
		{
			0% {-webkit-transform:rotate(0deg);}
			50% {-webkit-transform:rotate(180deg);}
			100% {-webkit-transform:rotate(360deg);}
		}

		@-moz-keyframes mymove
		{
			0% {-moz-transform:rotate(0deg);}
			50% {-moz-transform:rotate(180deg);}
			100% {-moz-transform:rotate(360deg);}
		}

		@-o-keyframes mymove
		{
			0% {-o-transform:rotate(0deg);}
			50% {-o-transform:rotate(180deg);}
			100% {-o-transform:rotate(360deg);}
		}

		.icontainer .option a{
			position: absolute;
			width: 60px;height: 60px;
			left: 50%;margin-top: -40px;
			top: 50%;margin-left: -30px;
			background-color: transparent;
			opacity: 0;
			transition:all 1s;
			-webkit-transition:all 1s;
			-moz-transition:all 1s;
			-o-transition:all 1s;
		}

		.icontainer .option:hover a{
			opacity: 10;
		}

		.icontainer .option:hover div{

			border-color: #B5E61D;
		}
		.icontainer .option:hover a[class$="a"]{

			left: 0;margin-left: -60px;
		}

		.icontainer .option:hover a[class$="b"]{

			margin-left: -30px;
		}

		.icontainer .option:hover a[class$="c"]{

			left: 150px;margin-left: 10px;
		}

		/* 阿里云fonticon */
		@font-face {
			 font-family: 'iconfont';  /* project id 507366 */
			 src: url('http://at.alicdn.com/t/font_507366_kkg91z5baqtr19k9.eot');
			 src: url('http://at.alicdn.com/t/font_507366_kkg91z5baqtr19k9.eot?#iefix') format('embedded-opentype'),
			 url('http://at.alicdn.com/t/font_507366_kkg91z5baqtr19k9.woff') format('woff'),
			 url('http://at.alicdn.com/t/font_507366_kkg91z5baqtr19k9.ttf') format('truetype'),
			 url('http://at.alicdn.com/t/font_507366_kkg91z5baqtr19k9.svg#iconfont') format('svg');
		}

		.iconfont{
    		font-family:"iconfont" !important;
    		font-size:60px;font-style:normal;
    		color: white;
    		-webkit-font-smoothing: antialiased;
    		-webkit-text-stroke-width: 0.2px;
    		-moz-osx-font-smoothing: grayscale;
		}
/* ---------------------tabul-------------------------- */
		.tabul{
			position: fixed;left: 0;top: 0;
			width: 100%;height: 100%;
			padding-top: 70px;
			background-color: rgba(0,0,0,0.6);
			opacity: 0;
			display: none;
		}

		.tabul div{
			width: 80%;
			margin: 0 auto;
			height: 70%;
			overflow: auto;
			z-index: 666;
			position: relative;
			background-color: rgba(39,40,34,0.8);
		}

		.tabul div ul{
			margin:0;
			padding: 0;
			list-style: none;
			width: 98%;
			padding: 20px 0;
			border-left: 1px solid rgba(150,150, 150, .1);
			border-right: 1px solid rgba(150,150, 150, .1);
		}

		.tabul div ul li{
			overflow: hidden;
			width: 100%;height: 50px;
			border-top: 1px solid rgba(150,150, 150, .1);
			text-align: left;color: white;
			padding-left: 50px;line-height: 50px;
			transition:color 0.5s,border 0.3s;
			-moz-transition:color 0.5s,border 0.3s;
			-o-transition:color 0.5s,border 0.3s;
			-webkit-transition:color 0.5s,border 0.3s;

		}

		.tabul div ul li:hover{
			color: #00A2E8;
			border-color: #00A2E8;
		}


		.tabul div ul li .ciont{
			float: right;
			width: 40px;height: 40px;
		}

		.tabul div ul li span .iconfont{
			font-size: 25px;
		}

		.tabul div ul li span:nth-child(3){
			height: 50px;
			cursor:pointer;
		}

		.tabul div ul li span .active{
			color: #FFC90E;
		}

		.icontainer .tabul div ul li .coloractive{
			color: #00A2E8;
			border-color: #00A2E8;
		}

		.active{
			color: #FFC90E;
		}

		.control{
			position: fixed;
			bottom: 60px;
			width: 480px;height: 50px;
			padding: 5px 10px;
			border-bottom: 1px solid #00A2E8;
			z-index: 999;
		}

		.control.container{
			width: 80%;
			left: 50%;
			margin-left: -40%;
		}

		.control-end{
			position: fixed;
			width: 50px;height: 50px;
			top: 50px;right: 40px;
			cursor:pointer;
		}

		.control-end .iconfont{
			font-size: 40px;
			color: #00A2E8;
			opacity: 0.4;
			transition:opacity 0.5s;
			-moz-transition:opacity 0.5s;
			-o-transition:opacity 0.5s;
			-webkit-transition:opacity 0.5s;
		}

		.control-end .iconfont:hover{
			opacity: 1;
		}

		.control .progress{
			height: 100%;
			min-width: 310px;
			float: left;
			background-color: transparent;
			box-shadow: none;
			-webkit-box-shadow:0;
		}

		.control .progress span{
			position: absolute;
			top: 50%;
			margin-top: -10px;
			color: #31c27c;
		}

		.control .progress .start{
			left: 0;
		}

		.control .progress .end{
			right: 0;
		}

		.progressbar {
		   position: relative;
		   width: 80%;
		   height: 5px;
		   background-color: #CAC8C8;
		   color: #CAC8C8;
		   vertical-align: 2px;
		   border-radius: 3px;
		   cursor: pointer;
		   float: left;
		   top: 50%;
		   margin:0 5px;
		   margin-left: 10%;
		}

		.now {
		   position: absolute;
		   left: 0;
		   display: inline-block;
		   height: 5px;
		   width: 70%;
		   background: #31c27c;
		}

		.now::after {
		   content: '';
		   position: absolute;
		   left: 100%;
		   width: 8px;
		   height: 8px;
		   margin-top: -2px;
		   border-radius: 15%;
		   background-color: lightblue;
		}

		.control .icontbox{
			height: 100%;
			float: right;
		}
		.control .icontbox a i{
			color: #31c27c;
		}

		.control a{
			display: inline-block;
			float: right;
			margin-left: 2%;
			background-color: transparent;
			width: 30%;height:100%;
			text-decoration: none;
		}

		.control a:hover{
			background-color: transparent;
		}

		.control a:hover .iconfont{
			color: #00A2E8;
		}

		.control a .iconfont{
			font-size: 25px;
			transition:color 0.5s;
			-moz-transition:color 0.5s;
			-o-transition:color 0.5s;
			-webkit-transition:color 0.5s;
		}


		.collect{
			position: fixed;left: 10%;top: 8%;
			width: 80%;
			background-color: rgb(255,255,255);
			border-radius: 16px;
			height: 70%;display: none;
			overflow: auto;
		}

		.collect ul{
			margin:0;
			padding: 0;
			list-style: none;
			width: 100%;
			margin: 20px auto;
			padding: 20px 0;
			border-left: 1px solid rgba(150, 150, 150, .1);
			border-right: 1px solid rgba(150, 150, 150, .1);
		}

		.collect ul li{
			overflow: hidden;
			width: 100%;height: 50px;
			border-top: 1px solid rgba(150, 150, 150, .1);
			text-align: left;color: black;
			padding-left: 50px;line-height: 50px;
			transition:color 0.5s,border 0.3s;
			-moz-transition:color 0.5s,border 0.3s;
			-o-transition:color 0.5s,border 0.3s;
			-webkit-transition:color 0.5s,border 0.3s;

		}

		.collect ul li:hover{
			color: #00A2E8;
			border-color: #00A2E8;
		}

		.collect ul li .ciont{
			float: right;
			width: 40px;height: 40px;
		}

		.collect li span .iconfont{
			font-size: 25px;
		}

		.online{
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			display: none;
			
		}

		.profile{
			height: 100%;
			width: 0%;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1000;
			overflow: hidden;
			background-color: rgba(0,0,0,0.8);
		}
		.profile .close{
			display: block;
			width: 50px;
			height: 50px;
			float: right;
			opacity: .9;
			margin: 20px;
			color: white;
		}
		.profile .close:hover{
			opacity: 1;
			color:white;
		}
		.profile .contxt{
			width: 100%;
			height: 80%;
			margin-top: 20%;
			opacity: 0;
			color: rgba(255,255,255,0.7);
			text-align: center;
		}
		.profile .contxt div{
			width: 100%;
			height: 40%;
			position: relative;
			overflow: hidden;
		}
		.profile .contxt div img{
			width:200px;
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -100px;
			border-radius: 5px;
		}
		/*bug*/
		body .icontainer a:hover, body .icontainer a:focus {
			color: transparent;
		}
		body .icontainer .obtain a.active:hover{
			color: #00A2E8;
		}

		/*模态框*/
		.modal  .modal-body img{
			width: 100%;
		}

		@media(max-width:768px){
			html,body{
				width: 100%;
				height: 100%;
			}

			body:before{
				background-color: #844E74;
				background-image: none;
			}

			.tabul div{
				height:78%;
				width: 90%;
			}
			.collect{
				height: 70%;
				top: 12%;
			}
			.control-end{
				display: none;
			}
			.tabul div ul li,.collect ul li{
				padding-left: 10px;
				overflow: none;
			}
			.control.container {
				width: 98%;
				margin-left:-49%;
			}
			.icontainer .obtain.container{
				width: 100%;
			}
			.icontainer .obtain.container a{
				color: white;
			}
			.icontainer .obtain.container a:nth-of-type(1){
				border-radius: 11px 0 0 11px;
				background-color: cornflowerblue;
				margin: 0;
			}
			.icontainer .obtain.container a:nth-of-type(2){
				border-radius: 0 11px 11px 0;
				background-color: cyan;
				margin: 0;
			}
			.control .icontbox a i,.control .progress span{
				color: white;
			}
			
			.icontainer .option{
				top: 50%;
				margin-top: -80px;
				left: 50%;
				margin-left: -80px;
			}
			.icontainer .option a{
				opacity: 10;
			}
			.icontainer .option a[class$="a"]{

				left: 0;margin-left: -60px;
			}
	
			.icontainer .option a[class$="b"]{
	
				margin-left: -30px;
			}
	
			.icontainer .option a[class$="c"]{
	
				left: 150px;margin-left: 10px;
			}
			.online{
				top: 50px;
			}
			.profile .contxt div img{
				width: 30%;
				left: 50%;
				top: 20%;
				margin-left: -15%;
			}
		}
 